<template>
    <el-form :model="selectDate" style="margin: 20px 40px; display: flex;" v-if="IdentityType === 0">
        <el-form-item label="选择查看报告的学期" style="margin-right: 20px;">
            <el-select v-model="selectDate.YearTream" placeholder="您要查看那个学期的报告?">
                <el-option v-for="item in YearTreamList" :label="item" :value="item" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="selectSumbitTrem()"><el-icon>
                    <Search />
                </el-icon>搜索</el-button>
        </el-form-item>
    </el-form>

    <div class="common-layout" v-if="IdentityType === 1">
        <h1>教师端专用功能</h1>
    </div>

    <h1 id="top" v-if="showDiv">班级的五育发展<code>具体</code>情况</h1>


    <div class="container collapse" v-if="showDiv">
        <!-- 班级的综合评价情况 -->
        <details>
            <summary>班级的综合评价情况<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <div class="part1">
                        <!-- <p>『』● ∇ ✔ ✍ ▼ ✰ ✩ ⇩ ⇨</p> -->
                        <h3>〖分数分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 这一部分通过比较班级每个月的综合评价分数的分布情况，来反映班级在个体层面上五育整体发展的均衡情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-1呈现的是本班级各月的综合评价分数分布情况，这一表格以数值的形式描述了个体层面上的五育整体发展的均衡情况。</p>
                            <p>✰ 图表1-2呈现的是本班级各月的综合评价各分段的人数分布情况，即每个月综合评价的各个分段有多少名学生，以更加直观的方式描述了本班级在个体层面上的五育整体发展的均衡情况。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="ComprehensiveEvaluationDate" style="width: 100%">
                                        <el-table-column fixed prop="data" label="评价时间" align="center" />
                                        <el-table-column prop="classScore" label="班级分数" align="center" />
                                        <el-table-column prop="AverageNumber" label="平均数" align="center" />
                                        <el-table-column prop="median" label="中位数" align="center" />
                                        <el-table-column prop="mode" label="众数" width="180" align="center">
                                            <template v-slot="scope">
                                                <!-- 检查 scope 和 scope.row 是否存在 -->
                                                <span v-if="scope && scope.row && Array.isArray(scope.row.mode)">
                                                    {{ scope.row.mode.join('&nbsp;&nbsp;&nbsp;') }}
                                                </span>
                                                <span v-else>
                                                    {{ scope.row.mode }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="MinScore" label="最小值" align="center" />
                                        <el-table-column prop="MaxScore" label="最大值" align="center" />
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-1 各月的综合评价分数分布情况</p>
                            </div>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="bar1"></div>
                                <p>图表1-2 各月综合评价各分段的人数分布情况</p>
                            </div>
                        </div>
                        <div>
                            <h4>➢分析 : </h4>
                            <p>✰ 从集中程度上分析，各月相比之下，{{ ComprehensiveEvaluation.ComprehensiveEvaluation1 }}</p>
                            <p>✰ 从分布形态上分析，{{ ComprehensiveEvaluation.ComprehensiveEvaluation2 }}</p>
                            <p>✰ 从变化趋势来看，{{ ComprehensiveEvaluation.ComprehensiveEvaluation3 }}</p>
                        </div>
                    </div>
                    <div class="part2">
                        <h3>〖整体上各分数段学生分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 图表1-3展现的是本班级该学期在综合评价上各个分数段学生的分布情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-3内的各个分数段学生分布情况是以学生于{{ ComprehensiveEvaluation.ComprehensiveEvaluation4
                                }}时间内五育发展的整体表现划分的。
                            </p>
                            <p>✰ 图表1-3中，学生姓名出现的先后顺序是按照该分段中学生的水平高低呈现的。在某一分段中，越靠前的学生在这一分段中水平相对越低，越靠后的学生在这一分段中水平相对越高。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="DistributiontableData" border style="width: 100%">
                                        <el-table-column prop="strandScore" label="标准分数" width="180" />
                                        <el-table-column prop="number" label="人数" width="180" />
                                        <el-table-column prop="proportion" label="百分比" />
                                        <!-- 自定义列：展示nameList中的name -->
                                        <el-table-column label="学生姓名">
                                            <template #default="{ row }">
                                                <div>
                                                    <span v-if="row.nameList.length == 0"> ___ </span>
                                                    <!-- 遍历nameList，展示每个学生的name -->
                                                    <span v-for="(item, index) in row.nameList" :key="index"
                                                        v-if="row.nameList.length > 0">
                                                        {{ item.name }}
                                                        <!-- 如果你需要分隔学生姓名，可以在这里加上分隔符 -->
                                                        <span
                                                            v-if="index < row.nameList.length - 1">&nbsp;&nbsp;&nbsp;</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-3 该学期综合评价各分段的学生分布情况</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <!-- 班级的德育评价情况 -->
        <details>
            <summary>班级的德育评价情况<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <div class="part1">
                        <!-- <p>『』● ∇ ✔ ✍ ▼ ✰ ✩ ⇩ ⇨</p> -->
                        <h3>〖分数分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 这一部分通过比较班级每个月的综合评价分数的分布情况，来反映班级在个体层面上五育整体发展的均衡情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-1呈现的是本班级各月的综合评价分数分布情况，这一表格以数值的形式描述了个体层面上的五育整体发展的均衡情况。</p>
                            <p>✰ 图表1-2呈现的是本班级各月的综合评价各分段的人数分布情况，即每个月综合评价的各个分段有多少名学生，以更加直观的方式描述了本班级在个体层面上的五育整体发展的均衡情况。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="MoralEducationDate1" style="width: 100%">
                                        <el-table-column fixed prop="data" label="评价时间" align="center" />
                                        <el-table-column prop="classScore" label="班级分数" align="center" />
                                        <el-table-column prop="AverageNumber" label="平均数" align="center" />
                                        <el-table-column prop="median" label="中位数" align="center" />
                                        <el-table-column prop="mode" label="众数" width="180" align="center">
                                            <template v-slot="scope">
                                                <!-- 检查 scope 和 scope.row 是否存在 -->
                                                <span v-if="scope && scope.row && Array.isArray(scope.row.mode)">
                                                    {{ scope.row.mode.join('&nbsp;&nbsp;&nbsp;') }}
                                                </span>
                                                <span v-else>
                                                    {{ scope.row.mode }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="MinScore" label="最小值" align="center" />
                                        <el-table-column prop="MaxScore" label="最大值" align="center" />
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-1 各月的综合评价分数分布情况</p>
                            </div>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="bar2"></div>
                                <p class="chartp">图表1-2 各月综合评价各分段的人数分布情况</p>
                            </div>
                        </div>
                        <div>
                            <h4>➢分析 : </h4>
                            <p>✰ 从集中程度上分析，各月相比之下，{{ MoralEducation.MoralEducation1 }}</p>
                            <p>✰ 从分布形态上分析，{{ MoralEducation.MoralEducation2 }}</p>
                            <p>✰ 从变化趋势来看，{{ MoralEducation.MoralEducation3 }}</p>
                        </div>
                    </div>
                    <div class="part2">
                        <h3>〖整体上各分数段学生分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 图表1-3展现的是本班级该学期在综合评价上各个分数段学生的分布情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-3内的各个分数段学生分布情况是以学生于{{ MoralEducation.MoralEducation4 }}时间内五育发展的整体表现划分的。</p>
                            <p>✰ 图表1-3中，学生姓名出现的先后顺序是按照该分段中学生的水平高低呈现的。在某一分段中，越靠前的学生在这一分段中水平相对越低，越靠后的学生在这一分段中水平相对越高。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="MoralEducationDate3" border style="width: 100%">
                                        <el-table-column prop="strandScore" label="标准分数" width="180" />
                                        <el-table-column prop="number" label="人数" width="180" />
                                        <el-table-column prop="proportion" label="百分比" />
                                        <!-- 自定义列：展示nameList中的name -->
                                        <el-table-column label="学生姓名">
                                            <template #default="{ row }">
                                                <div>
                                                    <span v-if="row.nameList.length == 0"> ___ </span>
                                                    <!-- 遍历nameList，展示每个学生的name -->
                                                    <span v-for="(item, index) in row.nameList" :key="index"
                                                        v-if="row.nameList.length > 0">
                                                        {{ item.name }}
                                                        <!-- 如果你需要分隔学生姓名，可以在这里加上分隔符 -->
                                                        <span
                                                            v-if="index < row.nameList.length - 1">&nbsp;&nbsp;&nbsp;</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-3 该学期综合评价各分段的学生分布情况</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <!-- 班级的智育评价情况 -->
        <details>
            <summary>班级的智育评价情况<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <div class="part1">
                        <!-- <p>『』● ∇ ✔ ✍ ▼ ✰ ✩ ⇩ ⇨</p> -->
                        <h3>〖分数分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 这一部分通过比较班级每个月的综合评价分数的分布情况，来反映班级在个体层面上五育整体发展的均衡情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-1呈现的是本班级各月的综合评价分数分布情况，这一表格以数值的形式描述了个体层面上的五育整体发展的均衡情况。</p>
                            <p>✰ 图表1-2呈现的是本班级各月的综合评价各分段的人数分布情况，即每个月综合评价的各个分段有多少名学生，以更加直观的方式描述了本班级在个体层面上的五育整体发展的均衡情况。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="IntellectualEducationDate1" style="width: 100%">
                                        <el-table-column fixed prop="data" label="评价时间" align="center" />
                                        <el-table-column prop="classScore" label="班级分数" align="center" />
                                        <el-table-column prop="AverageNumber" label="平均数" align="center" />
                                        <el-table-column prop="median" label="中位数" align="center" />
                                        <el-table-column prop="mode" label="众数" width="180" align="center">
                                            <template v-slot="scope">
                                                <!-- 检查 scope 和 scope.row 是否存在 -->
                                                <span v-if="scope && scope.row && Array.isArray(scope.row.mode)">
                                                    {{ scope.row.mode.join('&nbsp;&nbsp;&nbsp;') }}
                                                </span>
                                                <span v-else>
                                                    {{ scope.row.mode }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="MinScore" label="最小值" align="center" />
                                        <el-table-column prop="MaxScore" label="最大值" align="center" />
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-1 各月的综合评价分数分布情况</p>
                            </div>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="bar3"></div>
                                <p>图表1-2 各月综合评价各分段的人数分布情况</p>
                            </div>
                        </div>
                        <div>
                            <h4>➢分析 : </h4>
                            <p>✰ 从集中程度上分析，各月相比之下，{{ IntellectualEducation.IntellectualEducation1 }}</p>
                            <p>✰ 从分布形态上分析，{{ IntellectualEducation.IntellectualEducation2 }}</p>
                            <p>✰ 从变化趋势来看，{{ IntellectualEducation.IntellectualEducation3 }}</p>
                        </div>
                    </div>
                    <div class="part2">
                        <h3>〖整体上各分数段学生分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 图表1-3展现的是本班级该学期在综合评价上各个分数段学生的分布情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-3内的各个分数段学生分布情况是以学生于{{
                                IntellectualEducation.IntellectualEducation4 }}时间内五育发展的整体表现划分的。</p>
                            <p>✰ 图表1-3中，学生姓名出现的先后顺序是按照该分段中学生的水平高低呈现的。在某一分段中，越靠前的学生在这一分段中水平相对越低，越靠后的学生在这一分段中水平相对越高。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="IntellectualEducationDate3" border style="width: 100%">
                                        <el-table-column prop="strandScore" label="标准分数" width="180" />
                                        <el-table-column prop="number" label="人数" width="180" />
                                        <el-table-column prop="proportion" label="百分比" />
                                        <!-- 自定义列：展示nameList中的name -->
                                        <el-table-column label="学生姓名">
                                            <template #default="{ row }">
                                                <div>
                                                    <span v-if="row.nameList.length == 0"> ___ </span>
                                                    <!-- 遍历nameList，展示每个学生的name -->
                                                    <span v-for="(item, index) in row.nameList" :key="index"
                                                        v-if="row.nameList.length > 0">
                                                        {{ item.name }}
                                                        <!-- 如果你需要分隔学生姓名，可以在这里加上分隔符 -->
                                                        <span
                                                            v-if="index < row.nameList.length - 1">&nbsp;&nbsp;&nbsp;</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <p>图表1-3 该学期综合评价各分段的学生分布情况</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <!-- 班级的体育评价情况 -->
        <details>
            <summary>班级的体育评价情况<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <div class="part1">
                        <!-- <p>『』● ∇ ✔ ✍ ▼ ✰ ✩ ⇩ ⇨</p> -->
                        <h3>〖分数分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 这一部分通过比较班级每个月的综合评价分数的分布情况，来反映班级在个体层面上五育整体发展的均衡情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-1呈现的是本班级各月的综合评价分数分布情况，这一表格以数值的形式描述了个体层面上的五育整体发展的均衡情况。</p>
                            <p>✰ 图表1-2呈现的是本班级各月的综合评价各分段的人数分布情况，即每个月综合评价的各个分段有多少名学生，以更加直观的方式描述了本班级在个体层面上的五育整体发展的均衡情况。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="PhysicalEducationDate1" style="width: 100%">
                                        <el-table-column fixed prop="data" label="评价时间" align="center" />
                                        <el-table-column prop="classScore" label="班级分数" align="center" />
                                        <el-table-column prop="AverageNumber" label="平均数" align="center" />
                                        <el-table-column prop="median" label="中位数" align="center" />
                                        <el-table-column prop="mode" label="众数" width="180" align="center">
                                            <template v-slot="scope">
                                                <!-- 检查 scope 和 scope.row 是否存在 -->
                                                <span v-if="scope && scope.row && Array.isArray(scope.row.mode)">
                                                    {{ scope.row.mode.join('&nbsp;&nbsp;&nbsp;') }}
                                                </span>
                                                <span v-else>
                                                    {{ scope.row.mode }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="MinScore" label="最小值" align="center" />
                                        <el-table-column prop="MaxScore" label="最大值" align="center" />
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-1 各月的综合评价分数分布情况</p>
                            </div>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="bar4"></div>
                                <p>图表1-2 各月综合评价各分段的人数分布情况</p>
                            </div>
                        </div>
                        <div>
                            <h4>➢分析 : </h4>
                            <p>✰ 从集中程度上分析，各月相比之下，{{ PhysicalEducation.PhysicalEducation1 }}</p>
                            <p>✰ 从分布形态上分析，{{ PhysicalEducation.PhysicalEducation2 }}</p>
                            <p>✰ 从变化趋势来看，{{ PhysicalEducation.PhysicalEducation3 }}</p>
                        </div>
                    </div>
                    <div class="part2">
                        <h3>〖整体上各分数段学生分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 图表1-3展现的是本班级该学期在综合评价上各个分数段学生的分布情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-3内的各个分数段学生分布情况是以学生于{{
                                PhysicalEducation.PhysicalEducation4 }}时间内五育发展的整体表现划分的。</p>
                            <p>✰ 图表1-3中，学生姓名出现的先后顺序是按照该分段中学生的水平高低呈现的。在某一分段中，越靠前的学生在这一分段中水平相对越低，越靠后的学生在这一分段中水平相对越高。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="PhysicalEducationDate3" border style="width: 100%">
                                        <el-table-column prop="strandScore" label="标准分数" width="180" />
                                        <el-table-column prop="number" label="人数" width="180" />
                                        <el-table-column prop="proportion" label="百分比" />
                                        <!-- 自定义列：展示nameList中的name -->
                                        <el-table-column label="学生姓名">
                                            <template #default="{ row }">
                                                <div>
                                                    <span v-if="row.nameList.length == 0"> ___ </span>
                                                    <!-- 遍历nameList，展示每个学生的name -->
                                                    <span v-for="(item, index) in row.nameList" :key="index"
                                                        v-if="row.nameList.length > 0">
                                                        {{ item.name }}
                                                        <!-- 如果你需要分隔学生姓名，可以在这里加上分隔符 -->
                                                        <span
                                                            v-if="index < row.nameList.length - 1">&nbsp;&nbsp;&nbsp;</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <p>图表1-3 该学期综合评价各分段的学生分布情况</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <!--  班级的美育评价情况 -->
        <details>
            <summary>班级的美育评价情况<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <div class="part1">
                        <!-- <p>『』● ∇ ✔ ✍ ▼ ✰ ✩ ⇩ ⇨</p> -->
                        <h3>〖分数分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 这一部分通过比较班级每个月的综合评价分数的分布情况，来反映班级在个体层面上五育整体发展的均衡情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-1呈现的是本班级各月的综合评价分数分布情况，这一表格以数值的形式描述了个体层面上的五育整体发展的均衡情况。</p>
                            <p>✰ 图表1-2呈现的是本班级各月的综合评价各分段的人数分布情况，即每个月综合评价的各个分段有多少名学生，以更加直观的方式描述了本班级在个体层面上的五育整体发展的均衡情况。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="BeautyEducationDate1" style="width: 100%">
                                        <el-table-column fixed prop="data" label="评价时间" align="center" />
                                        <el-table-column prop="classScore" label="班级分数" align="center" />
                                        <el-table-column prop="AverageNumber" label="平均数" align="center" />
                                        <el-table-column prop="median" label="中位数" align="center" />
                                        <el-table-column prop="mode" label="众数" width="180" align="center">
                                            <template v-slot="scope">
                                                <!-- 检查 scope 和 scope.row 是否存在 -->
                                                <span v-if="scope && scope.row && Array.isArray(scope.row.mode)">
                                                    {{ scope.row.mode.join('&nbsp;&nbsp;&nbsp;') }}
                                                </span>
                                                <span v-else>
                                                    {{ scope.row.mode }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="MinScore" label="最小值" align="center" />
                                        <el-table-column prop="MaxScore" label="最大值" align="center" />
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-1 各月的综合评价分数分布情况</p>
                            </div>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="bar5"></div>
                                <p>图表1-2 各月综合评价各分段的人数分布情况</p>
                            </div>
                        </div>
                        <div>
                            <h4>➢分析 : </h4>
                            <p>✰ 从集中程度上分析，各月相比之下，{{ BeautyEducation.BeautyEducation1 }}</p>
                            <p>✰ 从分布形态上分析，{{ BeautyEducation.BeautyEducation2 }}</p>
                            <p>✰ 从变化趋势来看，{{ BeautyEducation.BeautyEducation3 }}</p>
                        </div>
                    </div>
                    <div class="part2">
                        <h3>〖整体上各分数段学生分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 图表1-3展现的是本班级该学期在综合评价上各个分数段学生的分布情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-3内的各个分数段学生分布情况是以学生于{{
                                BeautyEducation.BeautyEducation4 }}时间内五育发展的整体表现划分的。</p>
                            <p>✰ 图表1-3中，学生姓名出现的先后顺序是按照该分段中学生的水平高低呈现的。在某一分段中，越靠前的学生在这一分段中水平相对越低，越靠后的学生在这一分段中水平相对越高。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="BeautyEducationDate3" border style="width: 100%">
                                        <el-table-column prop="strandScore" label="标准分数" width="180" />
                                        <el-table-column prop="number" label="人数" width="180" />
                                        <el-table-column prop="proportion" label="百分比" />
                                        <!-- 自定义列：展示nameList中的name -->
                                        <el-table-column label="学生姓名">
                                            <template #default="{ row }">
                                                <div>
                                                    <span v-if="row.nameList.length == 0"> ___ </span>
                                                    <!-- 遍历nameList，展示每个学生的name -->
                                                    <span v-for="(item, index) in row.nameList" :key="index"
                                                        v-if="row.nameList.length > 0">
                                                        {{ item.name }}
                                                        <!-- 如果你需要分隔学生姓名，可以在这里加上分隔符 -->
                                                        <span
                                                            v-if="index < row.nameList.length - 1">&nbsp;&nbsp;&nbsp;</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <p>图表1-3 该学期综合评价各分段的学生分布情况</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <!--班级的劳育评价情况  -->
        <details>
            <summary>班级的劳育评价情况<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <div class="part1">
                        <!-- <p>『』● ∇ ✔ ✍ ▼ ✰ ✩ ⇩ ⇨</p> -->
                        <h3>〖分数分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 这一部分通过比较班级每个月的综合评价分数的分布情况，来反映班级在个体层面上五育整体发展的均衡情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-1呈现的是本班级各月的综合评价分数分布情况，这一表格以数值的形式描述了个体层面上的五育整体发展的均衡情况。</p>
                            <p>✰ 图表1-2呈现的是本班级各月的综合评价各分段的人数分布情况，即每个月综合评价的各个分段有多少名学生，以更加直观的方式描述了本班级在个体层面上的五育整体发展的均衡情况。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="LaborEducationDate1" style="width: 100%">
                                        <el-table-column fixed prop="data" label="评价时间" align="center" />
                                        <el-table-column prop="classScore" label="班级分数" align="center" />
                                        <el-table-column prop="AverageNumber" label="平均数" align="center" />
                                        <el-table-column prop="median" label="中位数" align="center" />
                                        <el-table-column prop="mode" label="众数" width="180" align="center">
                                            <template v-slot="scope">
                                                <!-- 检查 scope 和 scope.row 是否存在 -->
                                                <span v-if="scope && scope.row && Array.isArray(scope.row.mode)">
                                                    {{ scope.row.mode.join('&nbsp;&nbsp;&nbsp;') }}
                                                </span>
                                                <span v-else>
                                                    {{ scope.row.mode }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="MinScore" label="最小值" align="center" />
                                        <el-table-column prop="MaxScore" label="最大值" align="center" />
                                    </el-table>
                                </div>
                                <p class="chartp">图表1-1 各月的综合评价分数分布情况</p>
                            </div>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="bar6"></div>
                                <p>图表1-2 各月综合评价各分段的人数分布情况</p>
                            </div>
                        </div>
                        <div>
                            <h4>➢分析 : </h4>
                            <p>✰ 从集中程度上分析，各月相比之下，{{ LaborEducation.LaborEducation1 }}</p>
                            <p>✰ 从分布形态上分析，{{ LaborEducation.LaborEducation2 }}</p>
                            <p>✰ 从变化趋势来看，{{ LaborEducation.LaborEducation3 }}</p>
                        </div>
                    </div>
                    <div class="part2">
                        <h3>〖整体上各分数段学生分布情况〗</h3>
                        <div>
                            <h4>➢说明 : </h4>
                            <p>✰ 图表1-3展现的是本班级该学期在综合评价上各个分数段学生的分布情况。呈现的结果可能受到教师评价侧重存在问题等因素的干扰。</p>
                            <p>✰ 图表1-3内的各个分数段学生分布情况是以学生于{{
                                LaborEducation.LaborEducation4 }}时间内五育发展的整体表现划分的。</p>
                            <p>✰ 图表1-3中，学生姓名出现的先后顺序是按照该分段中学生的水平高低呈现的。在某一分段中，越靠前的学生在这一分段中水平相对越低，越靠后的学生在这一分段中水平相对越高。</p>
                            <!-- 图表 -->
                            <div class="part1-chart1">
                                <div id="chart1">
                                    <el-table :data="LaborEducationDate3" border style="width: 100%">
                                        <el-table-column prop="strandScore" label="标准分数" width="180" />
                                        <el-table-column prop="number" label="人数" width="180" />
                                        <el-table-column prop="proportion" label="百分比" />
                                        <!-- 自定义列：展示nameList中的name -->
                                        <el-table-column label="学生姓名">
                                            <template #default="{ row }">
                                                <div>
                                                    <span v-if="row.nameList.length == 0"> ___ </span>
                                                    <!-- 遍历nameList，展示每个学生的name -->
                                                    <span v-for="(item, index) in row.nameList" :key="index"
                                                        v-if="row.nameList.length > 0">
                                                        {{ item.name }}
                                                        <!-- 如果你需要分隔学生姓名，可以在这里加上分隔符 -->
                                                        <span
                                                            v-if="index < row.nameList.length - 1">&nbsp;&nbsp;&nbsp;</span>
                                                    </span>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <p>图表1-3 该学期综合评价各分段的学生分布情况</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </details>
        <!--班级的强弱项分析  -->
        <details>
            <summary>班级的强弱项分析<span>➤</span></summary>
            <div class="details-wrapper">
                <div class="details-styling">
                    <el-table :data="weaknessSDate1" style="width: 100%">
                        <!-- 姓名学号 -->
                        <el-table-column fixed prop="UserName" label="姓名" width="150" />
                        <el-table-column prop="studentId" label="学号" width="120" />
                        <!-- 遍历 -->
                        <el-table-column label="弱项" width="300">
                            <template v-slot="scope">
                                <div v-if="Array.isArray(scope.row.weaknesses) && scope.row.weaknesses.length">
                                    <ul>
                                        <li v-for="(weakness, index) in scope.row.weaknesses" :key="index">
                                            {{ weakness.description }}
                                        </li>
                                    </ul>
                                </div>
                                <div v-else>无薄弱项</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="强项" width="300">
                            <template v-slot="scope">
                                <div v-if="Array.isArray(scope.row.strengths) && scope.row.strengths.length">
                                    <ul>
                                        <li v-for="(strength, index) in scope.row.strengths" :key="index">
                                            {{ strength.description }}
                                        </li>
                                    </ul>
                                </div>
                                <div v-else>无强项</div>
                            </template>
                        </el-table-column>
                        <!-- 操作 -->
                        <el-table-column fixed="right" label="操作" min-width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="AddCommit(scope.row)">进行学期评价</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 弹出框 -->
            <el-dialog v-model="centerDialogVisible" title="老师评价" width="500" center>
                <template #footer>
                    <div class="dialog-footer">
                        <el-form :model="weaknessSform" label-width="auto" style="max-width: 500px">
                            <el-form-item label="学号">
                                <el-input v-model="weaknessSform.studentId" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="weaknessSform.UserName" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="老师评价">
                                <el-input v-model="weaknessSform.comment" type="textarea" />
                            </el-form-item>
                        </el-form>
                        <el-button @click="deleteSubmit()">取消</el-button>
                        <el-button type="primary" @click="SubmitUpdate()" v-if="weaknessSform.type == 0">修改</el-button>
                        <el-button type="primary" @click="SubmitAdd()" v-if="weaknessSform.type == 1">提交</el-button>
                    </div>
                </template>
            </el-dialog>
        </details>
    </div>

    <p v-if="showDiv"><a href="#top">回到顶部</a></p>
</template>
<script setup>
import { reactive, ref, toRefs } from 'vue';
import * as echarts from 'echarts';
/* 引入self的js */
import { getInfo } from "@/api/login";
import { listStudentScore, getStudentName, getWeakness, triggerWeakness } from "@/api/Classscoreonmonth/Classscoreonmonth";
import { listIndicator } from '@/api/indicator/indicator'
import { listCommentsbyTeacher, updateComments, addComments } from '@/api/comments/comments'
const centerDialogVisible = ref(false)
import useTeacherInfo from "@/api/classReport/index";
const { scoreList, loadData, userInfo } = useTeacherInfo();
// 是否显示页面信息
const showDiv = ref(false);
// 教师 ? 管理员
const IdentityType = ref(0);
const YearTreamList = ref([]);
// 选择数据
const selectDate = ref({
    YearTream: ''
})
// 存储未处理数据
const NotHanleDate = ref([])
// 存储月份信息
const YearMonths = ref([])

/** 拿取学期成绩 , 基础数据 */
const creatCommitTime = ref("")
async function selectSumbitTrem() {
    showDiv.value = true
    const yearTime = selectDate.value.YearTream
    const result = getTermDates(parseInt(userInfo.workList.yearAdmission), yearTime)
    var ListTemp = []
    await result.then(res => {
        NotHanleDate.value.forEach(item => {
            if (item.calculationtime.slice(0, 7) >= res.startDate && item.calculationtime.slice(0, 7) <= res.endDate) {
                ListTemp.push(item);
            }
        });
    })
    creatCommitTime.value = yearTime
    await WeaknessMethod(yearTime)

    // 评价信息
    listCommentsbyTeacher(userInfo.userList.userName).then(res => {
        var temp = []
        if (res.length) {
            res.forEach(item => {
                if (item.commentTime === yearTime) temp.push(item)
            })
        }
        CommitTotal.value = temp
    })

    HandleDate1(ListTemp)
    HandleDate2(ListTemp)
    HandleDate3(ListTemp)
    HandleDate4(ListTemp)
    HandleDate5(ListTemp)
    HandleDate6(ListTemp)
    processData(ListTemp)
}

async function WeaknessMethod(yearTime) {
    var data = {
        className: userInfo.workList.classss,
        yearAdmission: userInfo.workList.yearAdmission,
        yearTerm: yearTime,
        schoolName: userInfo.workList.school
    }
    // console.log(data);

    // 获取当前老师下的所有学生的薄弱项目
    triggerWeakness(data).then(res => {
        if (res.code == 200) {
            HandleWeaknessS(res.data)
        }
    }).catch(err => {
        console.log(err);
    })
}
async function getTermDates(startYear, gradeTerm) {
    // 解析学年和学期
    const regex = /(\d+)年级(上学期|下学期)/;
    const match = gradeTerm.match(regex);

    if (!match) {
        return null; // 格式错误
    }

    const grade = parseInt(match[1]); // 获取年级
    const term = match[2]; // 获取学期（上学期或下学期）
    // 根据入学年份和年级推算当前学年的年份
    const schoolYear = startYear + grade - 1; // 学年从入学年份开始

    let startMonth, endMonth;

    // 根据学期推算起始和结束月份
    if (term === "上学期") {
        // 上学期：从 9月 到 1月
        startMonth = 9;
        endMonth = 1; // 上学期通常到第二年1月结束
    } else if (term === "下学期") {
        // 下学期：从 3月 到 6月
        startMonth = 3;
        endMonth = 6;
    }

    const startDateYear = startMonth === 9 ? schoolYear : schoolYear + 1; // 上学期年份不变，下学期年份加 1
    const endDateYear = endMonth === 1 ? schoolYear + 1 : schoolYear; // 上学期结束在第二年，下学期保持当前年份

    // 拼接日期，确保月份为两位数
    const startDate = `${startDateYear}-${String(startMonth).padStart(2, '0')}`;
    const endDate = `${endDateYear}-${String(endMonth).padStart(2, '0')}`;

    return {
        startDate,
        endDate
    };
};

/* 1. 班级的综合评价部分的方法和数据 Comprehensive evaluation*/
const ComprehensiveEvaluation = reactive({
    ComprehensiveEvaluationDate: [],    // 表格1-1数据
    BarChartData: {}, // 柱状图数据
    DistributiontableData: [], // 表格1-3数据
    /** 评价信息*/
    ComprehensiveEvaluation1: 'ComprehensiveEvaluation1',
    ComprehensiveEvaluation2: 'ComprehensiveEvaluation2',
    ComprehensiveEvaluation3: 'ComprehensiveEvaluation3',
    ComprehensiveEvaluation4: 'ComprehensiveEvaluation4',
})
const { ComprehensiveEvaluationDate, DistributiontableData, BarChartData } = toRefs(ComprehensiveEvaluation)

// 获取班级所有学生的成绩 , 比较标准九分的totalIndicator
function HandleDate1(res) {
    ComprehensiveEvaluationDate.value = calculateMonthlyStats(res, 'totalIndicator')
}

// 条形图数据处理
async function HandleDate2(res) {
    try {
        const ComprehensiveEvaluationBarChartDataList = await barHandleDate(res, 'totalIndicator');
        BarChartData.value = ComprehensiveEvaluationBarChartDataList;
        drawBarChart('bar1', BarChartData);
        TextAssignment1()
    } catch (error) {
        console.error("Error in HandleDate2:", error);
    }
}

// 图表1-3数据处理
function HandleDate3(res) {
    // console.log(calculateMonthlyStats2(res, 'totalIndicator'));
    calculateMonthlyStats2(res, 'totalIndicator').then(result => {
        DistributiontableData.value = result
    }).catch(error => {
        console.error('Error:', error);
    });
}

/* 2. 班级的具体部分的方法和数据 Specific evaluation*/
// 德育数据
const MoralEducation = reactive({
    /** 评价信息*/
    MoralEducationDate1: [],
    MoralEducationDate2: [],
    MoralEducationDate3: [],
    MoralEducation1: "MoralEducation1",
    MoralEducation2: "MoralEducation2",
    MoralEducation3: "MoralEducation3",
    MoralEducation4: "MoralEducation4",
})
const { MoralEducationDate1, MoralEducationDate2, MoralEducationDate3 } = toRefs(MoralEducation)

// 智育数据
const IntellectualEducation = reactive({
    IntellectualEducationDate1: [],
    IntellectualEducationDate2: [],
    IntellectualEducationDate3: [],
    /** 评价信息*/
    IntellectualEducation1: "IntellectualEducation1",
    IntellectualEducation2: "IntellectualEducation2",
    IntellectualEducation3: "IntellectualEducation3",
    IntellectualEducation4: "IntellectualEducation4",
})
const { IntellectualEducationDate1, IntellectualEducationDate2, IntellectualEducationDate3 } = toRefs(IntellectualEducation)
// 体育数据
const PhysicalEducation = reactive({
    PhysicalEducationDate1: [],
    PhysicalEducationDate2: [],
    PhysicalEducationDate3: [],
    /** 评价信息*/
    PhysicalEducation1: "PhysicalEducation1",
    PhysicalEducation2: "PhysicalEducation2",
    PhysicalEducation3: "PhysicalEducation3",
    PhysicalEducation4: "PhysicalEducation4",
})
const { PhysicalEducationDate1, PhysicalEducationDate2, PhysicalEducationDate3 } = toRefs(PhysicalEducation)
// 美育数据
const BeautyEducation = reactive({
    BeautyEducationDate1: [],
    BeautyEducationDate2: [],
    BeautyEducationDate3: [],
    /** 评价信息*/
    BeautyEducation1: "BeautyEducation1",
    BeautyEducation2: "BeautyEducation2",
    BeautyEducation3: "BeautyEducation3",
    BeautyEducation4: "BeautyEducation4",
})
const { BeautyEducationDate1, BeautyEducationDate2, BeautyEducationDate3 } = toRefs(BeautyEducation)
// 劳育数据
const LaborEducation = reactive({
    LaborEducationDate1: [],
    LaborEducationDate2: [],
    LaborEducationDate3: [],
    /** 评价信息*/
    LaborEducation1: "LaborEducation1",
    LaborEducation2: "LaborEducation2",
    LaborEducation3: "LaborEducation3",
    LaborEducation4: "LaborEducation4",
})
const { LaborEducationDate1, LaborEducationDate2, LaborEducationDate3 } = toRefs(LaborEducation)
// 分项图表1数据
function HandleDate4(res) {
    MoralEducationDate1.value = calculateMonthlyStats(res, '1')
    IntellectualEducationDate1.value = calculateMonthlyStats(res, '2')
    PhysicalEducationDate1.value = calculateMonthlyStats(res, '3')
    BeautyEducationDate1.value = calculateMonthlyStats(res, '4')
    LaborEducationDate1.value = calculateMonthlyStats(res, '5')
}
// 分项处理表3的数据
function HandleDate5(res) {
    // console.log(calculateMonthlyStats2(res, 'totalIndicator'));
    calculateMonthlyStats2(res, '1').then(result => {
        MoralEducationDate3.value = result
    }).catch(error => {
        console.error('Error:', error);
    });
    calculateMonthlyStats2(res, '2').then(result => {
        IntellectualEducationDate3.value = result
    }).catch(error => {
        console.error('Error:', error);
    });
    calculateMonthlyStats2(res, '1').then(result => {
        PhysicalEducationDate3.value = result
    }).catch(error => {
        console.error('Error:', error);
    });
    calculateMonthlyStats2(res, '1').then(result => {
        BeautyEducationDate3.value = result
    }).catch(error => {
        console.error('Error:', error);
    });
    calculateMonthlyStats2(res, '1').then(result => {
        LaborEducationDate3.value = result
    }).catch(error => {
        console.error('Error:', error);
    });
}
// 分表2数据处理
async function HandleDate6(res) {
    try {
        const ComprehensiveEvaluationBarChartDataList1 = await barHandleDate(res, '1');
        const ComprehensiveEvaluationBarChartDataList2 = await barHandleDate(res, '2');
        const ComprehensiveEvaluationBarChartDataList3 = await barHandleDate(res, '3');
        const ComprehensiveEvaluationBarChartDataList4 = await barHandleDate(res, '4');
        const ComprehensiveEvaluationBarChartDataList5 = await barHandleDate(res, '5');
        MoralEducationDate2.value = ComprehensiveEvaluationBarChartDataList1;

        IntellectualEducationDate2.value = ComprehensiveEvaluationBarChartDataList2;
        PhysicalEducationDate2.value = ComprehensiveEvaluationBarChartDataList3;
        BeautyEducationDate2.value = ComprehensiveEvaluationBarChartDataList4;
        LaborEducationDate2.value = ComprehensiveEvaluationBarChartDataList5;
        drawBarChart('bar2', MoralEducationDate2);
        drawBarChart('bar3', IntellectualEducationDate2);
        drawBarChart('bar4', PhysicalEducationDate2);
        drawBarChart('bar5', BeautyEducationDate2);
        drawBarChart('bar6', LaborEducationDate2);
        TextAssignment2()
    } catch (error) {
        console.error("Error in HandleDate2:", error);
    }
}
/** 3. 公共方法 */
// 每个学生每个月的成绩 , 计算每个学生的学期成绩
function calculateAnnualAverageWithDetails(data) {
    // 用于存储每个学生的学年平均成绩及其他字段
    const result = [];

    // 根据学生 ID 分组
    const groupedData = data.reduce((acc, item) => {
        // 使用 studentId 作为分组的键
        if (!acc[item.studentId]) {
            acc[item.studentId] = {
                studentname: item.studentname,
                studentId: item.studentId,
                scoreList: [],
            };
        }

        // 添加 strandScore 的 totalIndicator 和计算时间
        acc[item.studentId].scoreList.push(item.scoreList);

        return acc;
    }, {});
    // 对每个学生计算学年平均成绩，并保留其他字段
    for (const studentId in groupedData) {
        const student = groupedData[studentId];
        const total = student.scoreList.reduce((sum, value) => sum + value, 0);
        const average = total / student.scoreList.length;

        // 四舍五入到整数
        const roundedAverage = Math.round(average);
        // 将结果存储在数组中，包括学生姓名、ID、学年平均成绩
        result.push({
            studentId: student.studentId,
            studentname: student.studentname,
            score: roundedAverage
        });
    }
    return result;
}

// 将计算好学期成绩的数据转换成1-9分段包含人数,比例,姓名List的数据结构,便于表格展示
function categorizeStudentsToStrandScores(studentData) {
    const scoreDistribution = [
        { strandScore: 1, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 2, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 3, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 4, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 5, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 6, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 7, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 8, number: 0, proportion: '0.%', nameList: [] },
        { strandScore: 9, number: 0, proportion: '0.%', nameList: [] }
    ];
    const totalStudents = studentData.length;

    // 遍历学生数据
    studentData.forEach(student => {
        const score = student.score;
        if (score >= 1 && score <= 9) {
            const index = score - 1;  // 1-9分段对应数组索引 0-8
            scoreDistribution[index].nameList.push({ name: student.studentname, score: student.score });
            scoreDistribution[index].number += 1;  // 增加该分段的学生数量
        }
    });
    // 计算每个分段的比例
    scoreDistribution.forEach(strand => {
        if (totalStudents > 0) {
            strand.proportion = ((strand.number / totalStudents) * 100).toFixed(2) + '%';
        }
    });

    return scoreDistribution
}
// 计算公式
function figureout(List) {
    // 1. 计算平均数 (Mean)
    const mean = List.reduce((sum, num) => sum + num, 0) / List.length;

    // 2. 计算中位数 (Median)
    const sortedList = List.slice().sort((a, b) => a - b); // 对数组排序
    const median = sortedList.length % 2 === 0
        ? (sortedList[sortedList.length / 2 - 1] + sortedList[sortedList.length / 2]) / 2
        : sortedList[Math.floor(sortedList.length / 2)];

    // 3. 计算众数 (Mode)
    const frequency = {};
    List.forEach(num => {
        frequency[num] = (frequency[num] || 0) + 1;
    });
    const maxFreq = Math.max(...Object.values(frequency)); // 最大频率
    const mode = Object.keys(frequency).filter(key => frequency[key] === maxFreq); // 可能有多个众数

    // 4. 最大值 (Max)
    const max = Math.max(...List);

    // 5. 最小值 (Min)
    const min = Math.min(...List);

    const result = {
        mean,
        median,
        mode: mode.map(Number), // 将众数转换为数字数组
        max,
        min
    };

    return result;
}
const TeacherId = ref([])
// 获取用户信息
async function getInfoo() {
    await loadData()  // 等待数据加载完成
    const userName = userInfo.userList.userName

    // 前置学期数据
    await getGenTrem()
    // 拿取数据
    TeacherId.value = userName
    listStudentScore(userName).then(res => {
        if (res.length) {
            NotHanleDate.value = res
        }
    })
}

// 判断选择哪个学期
async function getGenTrem() {
    const List = getSemesterNames(userInfo.workList.yearAdmission)
    List.forEach(item => {
        YearTreamList.value.push(item)
    })
}

function getSemesterNames(admissionYear) {
    const currentYear = new Date().getFullYear();
    const currentMonth = new Date().getMonth() + 1;
    let semesterNames = [];

    // 计算入学到当前学期的总学期数
    let totalSemesters = (currentYear - admissionYear) * 2 + (currentMonth >= 9 || currentMonth === 0 ? 1 : 0);

    // 遍历每个学期，生成学期名称
    for (let i = 0; i < totalSemesters; i++) {
        let grade = Math.floor(i / 2) + 1;  // 年级，i / 2 向下取整
        let semester = i % 2 === 0 ? '上学期' : '下学期';  // 奇偶学期判断

        // 生成学期名称并加入数组
        semesterNames.push(`${grade}年级${semester}`);
    }

    return semesterNames;
};

async function processData(res) {
    const YearMonth = [];
    res.forEach(item => {
        YearMonth.push(item.calculationtime.toString().slice(0, 7));
    });

    const uniqueYearMonths = [...new Set(YearMonth)];
    YearMonths.value = uniqueYearMonths.sort();
    TextAssignment();
}

// 表格1的数据处理
function calculateMonthlyStats(res, field) {
    // 按时间分组
    const tmpByTime = res.reduce((acc, item) => {
        const time = item.calculationtime.slice(0, 7); // 取月份部分
        const fieldValue = JSON.parse(item.strandScore)[field]; // 动态获取字段
        const studentData = {
            studentId: item.studentId,
            [field]: fieldValue
        };

        // 按时间分组
        if (!acc[time]) {
            acc[time] = [];
        }
        acc[time].push(studentData);
        return acc;
    }, {});

    // 计算每个月的数据统计结果
    const consult = []
    Object.keys(tmpByTime).forEach(time => {
        const data = tmpByTime[time];
        const count = data.map(item => item[field]);
        const result = figureout(count);
        consult.push({
            data: time,
            classScore: Math.round(result.mean),
            AverageNumber: result.mean,
            median: result.median,
            mode: result.mode,
            MinScore: result.min,
            MaxScore: result.max
        });
    });

    return consult
}

// 表格3数据的处理
function calculateMonthlyStats2(res, field) {
    const temp = []
    // 用 Promise.all 来处理多个异步请求
    const promises = res.map(item => {
        return getStudentName(item.studentId).then(response => {
            if (response.code === 200 && response.msg) {
                temp.push({
                    studentname: response.msg,
                    studentId: item.studentId,
                    scoreList: JSON.parse(item.strandScore)[field]
                });
            }
        });
    });

    // 使用 Promise.all 等待所有异步操作完成
    return Promise.all(promises).then(() => {
        // 当所有异步请求完成后执行的操作
        const result = calculateAnnualAverageWithDetails(temp)
        const consult = categorizeStudentsToStrandScores(result)
        return consult
    }).catch(error => {
        console.error('Error processing student scores:', error);
    });
}

// 条形图2进行处理
async function barHandleDate(res, filed) {
    const temp = []
    res.forEach(item => {
        temp.push({
            calculationtime: item.calculationtime.slice(0, 7),
            studentId: item.studentId,
            score: (JSON.parse(item.strandScore))[filed]
        })
    })
    const indicatorStats = {};
    temp.forEach(entry => {
        const { calculationtime, score, studentId } = entry;
        // 创建 totalIndicator 对应的月份记录
        if (!indicatorStats[`${score}分`]) {
            indicatorStats[`${score}分`] = {};
        }
        // 按照分数分组
        if (!indicatorStats[`${score}分`][calculationtime]) {
            indicatorStats[`${score}分`][calculationtime] = [];
        }
        indicatorStats[`${score}分`][calculationtime].push(studentId);
    });
    // 获取所有月份，并确保月份按时间排序
    const months = Object.values(indicatorStats)
        .flatMap(monthData => Object.keys(monthData))
        .filter((value, index, self) => self.indexOf(value) === index);

    // 对月份进行排序，确保日期顺序
    const sortedMonths = months.sort((a, b) => new Date(a) - new Date(b));

    // 创建响应式对象
    const ComprehensiveEvaluationBarChartDataList = reactive({
        source: [],  // 存放每个分数在各个月份的统计数据
        dimensions: [],  // 存放x轴维度
        series: []  // 存放系列
    });

    // 1. 构建 dimensions 和 series
    ComprehensiveEvaluationBarChartDataList.dimensions = ['product', ...sortedMonths.map(month => `${month}月`)];
    ComprehensiveEvaluationBarChartDataList.series = sortedMonths.map(() => ({ type: 'bar' }));

    // 2. 获取所有分数（确保按从小到大排序）
    const sortedScores = Object.keys(indicatorStats).sort((a, b) => b - a); // 按照分数大小排序

    // 3. 生成 source 数据
    sortedScores.forEach((totalIndicator) => {
        const monthsData = indicatorStats[totalIndicator];  // 获取当前分数的所有月份数据
        const product = `${totalIndicator}`;  // 将分数转为对应的 'X分'
        const row = { product };

        // 4. 遍历每个月的月份，统计该分数对应月份的学生数量
        sortedMonths.forEach((month) => {
            // 如果该月份有数据，就填充该月份的学生数量；否则填充0
            row[`${month}月`] = monthsData[month] ? monthsData[month].length : 0;
        });
        ComprehensiveEvaluationBarChartDataList.source.push(row);
    });

    return ComprehensiveEvaluationBarChartDataList
}

// 绘制条形图
function drawBarChart(id, filed) {
    const chart = echarts.init(document.getElementById(id));
    const allScores = ['1分', '2分', '3分', '4分', '5分', '6分', '7分', '8分', '9分'];  // 固定的所有分数

    // 生成源数据和对应的 x 轴
    const option = {
        grid: {
            bottom: '10%'  // 保持底部的间距
        },
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: filed.value.dimensions,
            source: filed.value.source
        },
        xAxis: {
            type: 'category',
            data: allScores  // 使用 1-9 分的所有分数作为 x 轴的标签
        },
        yAxis: {
            interval: 1
        },
        series: filed.value.series
    };

    // 设置图表的选项
    chart.setOption(option);
}

/**
 * 薄弱项的分析部分
 * */

const weaknessS = reactive({
    weaknessSDate: [],
    weaknessSDate1: [],
    weaknessSform: {},
    CommitTotal: []
})
const { weaknessSDate, weaknessSDate1, weaknessSform, CommitTotal } = toRefs(weaknessS)
// 处理薄弱项的获取数据
async function HandleWeaknessS(res) {
    // console.log(res);
    const weaknessSDateTemp = await Promise.all(res.map(async (item) => {
        const studentId = item.studentId;
        const temp = {};

        // 获取学生名字并且返回合并后的数据
        try {
            const studentNameRes = await getStudentName(studentId);
            if (studentNameRes.code === 200) {
                // console.log(item.strengths);
                temp.studentId = studentId;
                temp.weaknesses = item.weaknesses ? item.weaknesses.trim().split(", ") : [];
                temp.strengths = item.strengths ? item.strengths.trim().split(" ") : [];
                temp.UserName = studentNameRes.msg;
            }
        } catch (error) {
            console.error(`Error fetching name for studentId ${studentId}:`, error);
        }

        return temp; // 返回 temp 对象
    }));

    // weaknessSDate.value = weaknessSDateTemp
    const indicatorIds = await HandleweaknessSDate()
    weaknessSDateTemp.forEach(item => {
        var list1 = []
        var list2 = []
        if (item.weaknesses.length > 0) {
            item.weaknesses.forEach(element => {
                let result = indicatorIds.find(element1 => element1.indicatorId == element.trim());
                list1.push({ indicatorId: element.trim(), description: result.description });
            })
        }
        if (item.strengths.length > 0) {
            item.strengths.forEach(element => {
                let result = indicatorIds.find(element1 => element1.indicatorId == element.trim());
                list2.push({ indicatorId: element.trim(), description: result.description });
            })
        }

        // console.log(list1);
        // console.log(list2);
        weaknessSDate.value.push({
            studentId: item.studentId,
            UserName: item.UserName,
            weaknesses: list1,
            strengths: list2
        })

    })
    await HandleHandleweaknessSDate()
    // console.log(weaknessSDate1.value);

    // console.log(weaknessSDate.value);
}

async function HandleweaknessSDate() {
    const result = await listIndicator()
    const temp = []
    if (result.code == 200) {
        result.data.forEach(item => {
            temp.push({
                indicatorId: item.treeCode,
                description: item.description,
                category: item.category
            })
        })
    }
    return temp;
}


async function HandleHandleweaknessSDate() {
    try {
        // 使用 Promise.all 来并行处理异步请求
        const results = await Promise.all(weaknessSDate.value.map(async (item) => {
            const term = creatCommitTime.value
            const studentId = item.studentId
            const filteredResults = CommitTotal.value.filter(item => item.studentid === studentId && item.commentTime === term);
            // console.log(filteredResults);

            if (filteredResults.length > 0) {
                weaknessSDate1.value.push({
                    studentId: item.studentId,
                    UserName: item.UserName,
                    weaknesses: item.weaknesses,
                    strengths: item.strengths,
                    teacherid: TeacherId.value,
                    comment: filteredResults[0].comment,
                    commentid: filteredResults[0].commentid,
                    statue: 0,
                    commentTime: filteredResults[0].commentTime,
                    type: 0
                })
            } else {
                weaknessSDate1.value.push({
                    studentId: item.studentId,
                    UserName: item.UserName,
                    weaknesses: item.weaknesses,
                    strengths: item.strengths,
                    teacherid: TeacherId.value,
                    commentTime: term,
                    statue: 0,
                    comment: "",
                    commentid: "",
                    type: 1
                })
            }

        }));

    } catch (error) {
        console.error("处理弱项数据时发生错误:", error);
    }
}

// 添加学期评价
function AddCommit(row) {
    console.log(row);
    
    weaknessSform.value = row
    centerDialogVisible.value = true;
}

function deleteSubmit() {
    centerDialogVisible.value = false;
    weaknessSform.value = {}
}
import { ElMessage } from 'element-plus'
function SubmitUpdate() {
    // console.log(weaknessSform.value);
    const temp = {
        teacherid: weaknessSform.value.teacherid,
        studentid: weaknessSform.value.studentId,
        statue: 0,
        comment: weaknessSform.value.comment,
        commentTime: weaknessSform.value.commentTime,
        commentid: weaknessSform.value.commentid
    }
    updateComments(temp).then(response => {
        console.log(response);
        if (response.code == 200) {
            ElMessage.success('修改成功');
        }
    })

    weaknessSform.value = {}
    centerDialogVisible.value = false;
}

function SubmitAdd() {
    console.log(weaknessSform.value);
    const temp = {
        teacherid: weaknessSform.value.teacherid,
        studentid: weaknessSform.value.studentId,
        statue: 0,
        comment: weaknessSform.value.comment,
        commentTime: creatCommitTime.value
    }
    // console.log(temp);
    
    addComments(temp).then(response => {
        if (response.code == 200) {
            ElMessage.success('添加成功');
        }
    })
}

/** 文本赋值*/

// 时间赋值
function TextAssignment() {
    const time = `${YearMonths.value[0]}至${YearMonths.value[YearMonths.value.length - 1]}这${YearMonths.value.length}个月的`
    ComprehensiveEvaluation.ComprehensiveEvaluation4 = time
    MoralEducation.MoralEducation4 = time
    PhysicalEducation.PhysicalEducation4 = time
    IntellectualEducation.IntellectualEducation4 = time
    LaborEducation.LaborEducation4 = time
    BeautyEducation.BeautyEducation4 = time
}
// 文本赋值
function TextAssignment1() {
    /** 1. 文本1的赋值信息 */
    ComprehensiveEvaluation.ComprehensiveEvaluation1 = calculateConcentration(ComprehensiveEvaluationDate.value)
    MoralEducation.MoralEducation1 = calculateConcentration(MoralEducationDate1.value)
    PhysicalEducation.PhysicalEducation1 = calculateConcentration(PhysicalEducationDate1.value)
    IntellectualEducation.IntellectualEducation1 = calculateConcentration(IntellectualEducationDate1.value)
    LaborEducation.LaborEducation1 = calculateConcentration(LaborEducationDate1.value)
    BeautyEducation.BeautyEducation1 = calculateConcentration(BeautyEducationDate1.value)
}

// 文本赋值2
function TextAssignment2() {
    ComprehensiveEvaluation.ComprehensiveEvaluation2 = calculateDistributionShape(BarChartData.value.source)
    MoralEducation.MoralEducation2 = calculateDistributionShape(MoralEducationDate2.value.source)
    PhysicalEducation.PhysicalEducation2 = calculateDistributionShape(PhysicalEducationDate2.value.source)
    IntellectualEducation.IntellectualEducation2 = calculateDistributionShape(IntellectualEducationDate2.value.source)
    LaborEducation.LaborEducation2 = calculateDistributionShape(LaborEducationDate2.value.source)
    BeautyEducation.BeautyEducation2 = calculateDistributionShape(BeautyEducationDate2.value.source)

    /** 3. 文本3的赋值信息 */
    ComprehensiveEvaluation.ComprehensiveEvaluation3 = calculateTrend(BarChartData.value.source)
    MoralEducation.MoralEducation3 = calculateTrend(MoralEducationDate2.value.source)
    PhysicalEducation.PhysicalEducation3 = calculateTrend(PhysicalEducationDate2.value.source)
    IntellectualEducation.IntellectualEducation3 = calculateTrend(IntellectualEducationDate2.value.source)
    LaborEducation.LaborEducation3 = calculateTrend(LaborEducationDate2.value.source)
    BeautyEducation.BeautyEducation3 = calculateTrend(BeautyEducationDate2.value.source)
}

// 计算集中程度
function calculateConcentration(data) {
    const rangeThreshold = 2; // 判断范围跨度的阈值
    const centralThreshold = 2; // 判断平均数、众数和中位数差异的阈值

    const concentratedMonths = [];
    const dispersedMonths = [];

    data.forEach(item => {
        const { data: month, AverageNumber, median, mode, MinScore, MaxScore } = item;

        const range = MaxScore - MinScore;
        const rangeAnalysis = range <= rangeThreshold ? '集中' : '分散';

        const modeValue = mode[0]; // 假设众数数组只有一个值
        const centralDifference = Math.abs(AverageNumber - median) + Math.abs(median - modeValue) + Math.abs(AverageNumber - modeValue);
        const centralAnalysis = centralDifference === 0 ? '非常集中' : centralDifference <= centralThreshold ? '较集中' : '分散';

        if (rangeAnalysis === '集中' && centralAnalysis !== '分散') {
            concentratedMonths.push({ month, MinScore, MaxScore });
        } else {
            dispersedMonths.push({ month, MinScore, MaxScore });
        }
    });

    let concentrationText = '';

    // 集中的月份统一描述
    if (concentratedMonths.length > 0) {
        const minScore1 = Math.min(...concentratedMonths.map(item => item.MinScore));
        const maxScore1 = Math.max(...concentratedMonths.map(item => item.MaxScore));
        const months = concentratedMonths.map(item => item.month).join('、');
        concentrationText += `在${months}月，这些月份各分段人数的分布较为集中，分数跨度为 ${minScore1}分~${maxScore1}分之内;`;
    }

    // 分散的月份统一描述
    if (dispersedMonths.length > 0) {
        const minScore2 = Math.min(...dispersedMonths.map(item => item.MinScore));
        const maxScore2 = Math.max(...dispersedMonths.map(item => item.MaxScore));
        const months = dispersedMonths.map(item => item.month).join('、');
        concentrationText += `在${months}月，这些月份各分段人数的分布较为分散，分数跨度为 ${minScore2}分~${maxScore2}分之内;`;
    }

    // 整体趋势分析
    const overallConcentration = concentratedMonths.length > dispersedMonths.length ?
        '该学期整体上，各分段学生的分布比较集中' :
        '该学期整体上，各分段学生的分布比较分散';


    const MaxScore = Math.max(...data.map(item => item.MaxScore));
    const MinScore = Math.min(...data.map(item => item.MinScore));
    concentrationText += `${overallConcentration}，分数跨度为${MinScore}分~${MaxScore}分之内`;

    // console.log(concentrationText);
    return concentrationText;
}

// 计算分布形态
function calculateDistributionShape(data) {
    let analysis = '';
    const highThreshold = 7;
    const months = Object.keys(data[0]).filter(key => key !== 'product');

    // 用于存储每种分布形态的月份
    let highDistributionMonths = [];
    let lowDistributionMonths = [];
    let balancedDistributionMonths = [];

    // 每月分布形态分析
    months.forEach(month => {
        const monthData = data.map(item => ({
            score: parseInt(item.product),
            count: item[month]
        }));

        // 高分段和低分段人数统计
        const highCount = monthData
            .filter(item => item.score >= highThreshold)
            .reduce((sum, item) => sum + item.count, 0);

        const lowCount = monthData
            .filter(item => item.score < highThreshold)
            .reduce((sum, item) => sum + item.count, 0);

        // 判断分布形态并将月份分类
        if (highCount > lowCount) {
            highDistributionMonths.push(month);
        } else if (lowCount > highCount) {
            lowDistributionMonths.push(month);
        } else {
            balancedDistributionMonths.push(month);
        }
    });

    // 输出相同分布形态的月份
    if (highDistributionMonths.length > 0) {
        analysis += `${highDistributionMonths.join('、')}，高分段人数较多，低分段人数较少，偏向高分段集中。`;
    }

    if (lowDistributionMonths.length > 0) {
        analysis += `${lowDistributionMonths.join('、')}，低分段人数较多，高分段人数较少，偏向低分段集中。`;
    }

    if (balancedDistributionMonths.length > 0) {
        analysis += `${balancedDistributionMonths.join('、')}，高分段与低分段人数相当，分布较均匀`;
    }
    // 整体趋势分析
    const totalHighCount = data
        .filter(item => parseInt(item.product) >= highThreshold)
        .reduce((sum, item) => sum + months.reduce((mSum, month) => mSum + item[month], 0), 0);

    const totalLowCount = data
        .filter(item => parseInt(item.product) < highThreshold)
        .reduce((sum, item) => sum + months.reduce((mSum, month) => mSum + item[month], 0), 0);

    // 整体趋势判断
    if (totalHighCount > totalLowCount) {
        analysis += `该学期整体上呈现出高分段人数较多的分布形态，偏向高分段集中。`;
    } else if (totalLowCount > totalHighCount) {
        analysis += `该学期整体上呈现出低分段人数较多的分布形态，偏向低分段集中。`;
    } else {
        analysis += `该学期整体上呈现出高分段与低分段人数均衡的分布形态。`;
    }

    return analysis;
}

// 计算变化趋势
function calculateTrend(data) {
    const highThreshold = 7; // 高分段阈值
    const months = Object.keys(data[0]).filter(key => key !== 'product');

    let monthSummaries = [];
    let trendAnalysis = '';

    // 每月分布形态分析
    months.forEach(month => {
        const monthData = data.map(item => ({
            score: parseInt(item.product),
            count: item[month]
        }));

        // 高分段和低分段人数统计
        const highCount = monthData
            .filter(item => item.score >= highThreshold)
            .reduce((sum, item) => sum + item.count, 0);
        const lowCount = monthData
            .filter(item => item.score < highThreshold)
            .reduce((sum, item) => sum + item.count, 0);

        // 判断正态分布
        const counts = monthData.map(item => item.count);
        const isNormal = isNormalDistribution(counts);

        // 保存每月总结
        monthSummaries.push({
            month,
            highCount,
            lowCount,
            isNormal
        });
    });

    // 分析月份间的变化趋势
    for (let i = 1; i < monthSummaries.length; i++) {
        const prev = monthSummaries[i - 1];
        const curr = monthSummaries[i];

        // 高低分段人数变化
        if (curr.highCount > prev.highCount && curr.lowCount < prev.lowCount) {
            trendAnalysis += `${prev.month}到${curr.month}，高分段人数明显增加，低分段人数减少，分布趋势向高分集中。\n`;
        } else if (curr.lowCount > prev.lowCount && curr.highCount < prev.highCount) {
            trendAnalysis += `${prev.month}到${curr.month}，低分段人数明显增加，分布趋势向低分集中。\n`;
        }

        // 正态分布变化
        if (curr.isNormal && !prev.isNormal) {
            trendAnalysis += `${prev.month}到${curr.month}，分布形态逐渐向正态分布靠近。\n`;
        } else if (!curr.isNormal && prev.isNormal) {
            trendAnalysis += `${prev.month}到${curr.month}，分布形态从正态分布发生变化。\n`;
        }
    }

    // 若未生成分析结果，给出默认输出
    if (!trendAnalysis) {
        trendAnalysis = '没有显著的趋势变化。\n';
    }

    // console.log(trendAnalysis);
    return trendAnalysis;
}

// 使用偏度和峰度判断正态分布
function isNormalDistribution(counts) {
    const mean = counts.reduce((sum, value) => sum + value, 0) / counts.length;

    const stdDev = Math.sqrt(
        counts.reduce((sum, value) => sum + Math.pow(value - mean, 2), 0) / counts.length
    );

    const skewness =
        (counts.reduce((sum, value) => sum + Math.pow(value - mean, 3), 0) / counts.length) /
        Math.pow(stdDev, 3);

    const kurtosis =
        (counts.reduce((sum, value) => sum + Math.pow(value - mean, 4), 0) / counts.length) /
        Math.pow(stdDev, 4) - 3;

    const isSkewnessNormal = Math.abs(skewness) < 0.5;
    const isKurtosisNormal = Math.abs(kurtosis) < 0.5;

    return isSkewnessNormal && isKurtosisNormal;
}
getInfoo()
</script>
<style scoped>
.part1-chart1 {
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    display: flex;
}

.part1-chart1 #chart1,
#chart2 {
    width: 100%;
}

.part1-chart1 #bar1,
#bar2,
#bar3,
#bar4,
#bar5,
#bar6 {
    width: 100%;
    height: 350px;
}

#chart2-1 {
    width: 100%;
    height: 350px;
}

.chartp {
    margin-top: 10px;
}

.collapse-init summary+* {
    transition: all 0.25s ease-in-out;
    overflow: hidden;
}

.collapse-init :not(.panel-active) summary+* {
    height: 0;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: bottom center;
}

.collapse-init summary {
    list-style: none;
}

.collapse-init summary::-webkit-details-marker {
    display: none;
}

.collapse-init summary::before {
    display: none;
}

.collapse-init summary {
    cursor: pointer;
}

.details-styling {
    padding: 1em;
}

::-moz-selection {
    background: #f8f5fe;
    color: #4d4433;
}

::selection {
    background: #f8f5fe;
    color: #4d4433;
}

html {
    background: #f8f5fe;
    color: #3c334d;
}

body {
    font: 1em/1.4 "Quicksand", sans-serif;
    margin: 0 auto;
    max-width: 960px;
    padding: 5vw;
}

h1 {
    font-size: 2em;
    margin-bottom: 1em;
    text-align: center;
}

h1+p {
    margin-left: auto;
    margin-right: auto;
    max-width: 50ch;
}

h1~p {
    font-size: 1.2em;
    text-align: center;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

code {
    font-size: 1.2em;
    background: rgba(165, 153, 155, 0.1);
    color: #409EFF;
}

a {
    color: #409EFF;
    box-shadow: inset 0 -3px #409EFF;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}

a:hover,
a:focus {
    box-shadow: inset 0 -1.2em #91bde8;
    color: #f8f5fe;
}

abbr {
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 1.2em;
}

.container {
    width: 96%;
    box-shadow: 0.2em 1em 2em -1em #d6d1e0;
    margin: 2.4em auto;
}

details {
    background: #fff;
    border: 1px solid #d6d1e0;
    border-bottom: 0;
    list-style: none;
}

details:first-child {
    border-radius: 6px 6px 0 0;
}

details:last-child {
    border-bottom: 1px solid #d6d1e0;
    border-radius: 0 0 6px 6px;
}

summary {
    display: block;
    transition: 0.2s;
    font-weight: 700;
    padding: 1em;
}

summary:focus {
    outline: 1px solid rgba(165, 153, 155, 0.4);
}

.collapse-init summary::after {
    border-right: 2px solid;
    border-bottom: 2px solid;
    content: "";
    float: right;
    width: 0.5em;
    height: 0.5em;
    margin-top: 0.25em;
    transform: rotate(45deg);
    transition: inherit;
}

[open] summary {
    background: #409EFF;
    color: #f8f5fe;
}

[open] summary::after {
    margin-top: 0.5em;
    transform: rotate(225deg);
}

summary span {
    float: right;
}

.text-p {
    margin-left: 20px;
}
</style>
